<template>
  <div class="ParameterAudit item5">
    <!-- 政策参数维护初审 -->
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm" :rules="rules" label-width="80px">

            <el-row :gutter="12">
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="医保区划" prop="poolarea">
                  <el-select v-model="searchForm.payParaAttr" clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in payParaAttrList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="参数属性" prop="payParaAttr">
                  <el-select v-model="searchForm.payParaAttr" clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in payParaAttrList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="参数类型" prop="payParaType">
                  <el-select v-model="searchForm.payParaType" clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in payParaTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="参数名称" prop="paraName">
                  <el-input v-model="searchForm.paraName" clearable placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="审核状态" prop="chkFlag">
                  <el-select v-model="searchForm.chkFlag" clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in chkFlagList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="6">
                <el-form-item label="有效性" prop="valiFlag">
                  <el-select v-model="searchForm.valiFlag" clearable placeholder="请选择" style="width:100%;">
                    <el-option
                      v-for="item in valiFlagList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8" :xl="6">
                <el-button @click="restSearch">重置</el-button>
                <el-button type="primary" @click="search">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
    <section class="layer ts">
      <el-row :gutter="12">
        <el-col :span="16">
          <div class="box">
            <div class="box-header handle">
              <span class="box-title">政策参数</span>
            </div>
            <div class="box-body">
              <el-table
                v-loading="loading"
                :data="tableData"
                :row-key="getRowKeys"
                element-loading-spinner="el-loading1"
                border
                highlight-current-row
                height="tableHeight"
                style="width: 100%"
                @row-click="selectCurrent"
              >
                <el-table-column type="index" width="50" label="序号" align="center" />
                <!-- <el-table-column type="expand">
                  <template >
                    <el-table :data="tableData1" border highlight-current-row style="width: 100%">
                      <el-table-column type="index" width="50" label="序号" align="center"  />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="poolareaName" label="医保区划" align="center"  />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="paraCode" label="参数编码" align="center"  />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="paraDatatypeName" label="参数类型" align="center"  />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="payParaAttrName" label="参数属性" align="center"  />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="paraName" label="参数名称" align="center"  />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="paraDscr" label="参数说明" align="center"  />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="crteTime" label="维护时间" align="center" />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="chkFlagName" label="审核状态" align="center"  />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="valiFlagName" label="有效性" align="center"  />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="opter" label="经办人" align="center" />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="opterName" label="经办人名称" align="center" />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="oprtTime" label="经办时间" align="center" />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="opter" label="经办机构" align="center" />
                      <el-table-column :show-overflow-tooltip="true" sortable prop="oprtDscr" label="操作说明" align="center" />
                    </el-table>
                  </template>
                </el-table-column> -->
                <!-- <el-table-column type="index" width="50" label="序号" align="center" /> -->
                <el-table-column :show-overflow-tooltip="true" sortable prop="poolareaName" width="100" label="医保区划" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="payParaAttrName" width="120" label="参数属性" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="paraCode" width="150" label="参数编码" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="paraName" width="150" label="参数名称" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="payParaTypeName" width="120" label="参数类型" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="paraDatatypeName" width="120" label="参数数据类型" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="paraDscr" width="200" label="参数说明" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="crteTime" width="150" label="创建日期" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="crterName" width="150" label="创建人姓名" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="chkFlagName" width="100" label="审核状态" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="valiFlagName" width="85" label="有效性" align="center" />
                <el-table-column label="操作" width="120" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-button :disabled="scope.row.chkFlag !== '0'" type="text" @click.stop="auditRow(scope.row)">初审</el-button>
                    <el-button type="text" @click.stop="detilInfo(scope.row)">变更详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <el-pagination
                :current-page="currentPage"
                :page-sizes="[15, 30, 50, 100]"
                :page-size="pageSize"
                :total="total"
                layout="slot, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
                <template slot>
                  <span class="el-pagination__total">{{ `总共${total}条 显示${startRow}-${endRow}条` }}</span>
                </template>
              </el-pagination> -->
              <Pagination ref="pagination" :data="pagination" />
            </div>
          </div>

        </el-col>
        <el-col :span="8">

          <div class="box">
            <div class="box-header handle">
              <span class="box-title">参数值</span>
            </div>
            <div class="box-body">
              <el-table :data="tableDetails" border height="tableHeight" style="width: 100%;height:100%;">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column type="index" width="50" label="序号" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="paravalCode" label="参数值编码" align="center" />
                <el-table-column :show-overflow-tooltip="true" sortable prop="paraVal" label="参数值名称" align="center" />
              </el-table>
            </div>
          </div>
        </el-col>

      </el-row>
    </section>

  </div>
</template>

<script>
// 引入 portal 发送端工具
// import { portalMessageSend } from '@ncp-web/portal-communication'
import Pagination from '@/components/Pagination/index'
export default {
  name: 'ParameterAudit',
  components: {
    Pagination
  },
  mixins: [

  ],
  props: {

  },
  data() {
    return {
      pagination: { pageSize: 10, pageNum: 1, total: 0 }, // 分页数据
      loadingDetil: false,
      isShow: false,
      searchForm: {
        poolarea: '', // 医保区划编码
        payParaAttr: '', // 参数属性
        valiFlag: '1', // 有效性
        paraName: '', // 参数名称
        chkFlag: '0'
      },
      poolareaList: [], // 医保区划编码列表
      payParaAttrList: [], // 参数属性列表
      payParaTypeList: [], // 参数类型列表
      valiFlagList: [], // 有效性列表
      chkFlagList: [],
      tableData: [],
      tableData1: [],
      expands: [],
      total: 0, // 总条数
      startRow: 0,
      endRow: 0,
      pageSize: 15, // 每页多少条
      currentPage: 1, // 当前页
      tableDetails: [],
      dropData: {},
      rules: {
        poolarea: [{
          required: true,
          message: '请选择医保区划',
          trigger: 'blur'
        }]
      },
      loading: false
    }
  },
  computed: {

  },
  watch: {

  },
  created() {
    this.getParameterData(this.currentPage, this.pageSize)
    this.getDrop()
  },
  mounted() {
    this.$nextTick(() => {
    })
  },
  methods: {
    // // 页面跳转
    // goOtherRoute() {
    //   alert('开始跳转了')
    //   portalMessageSend.openMenu({
    //     // 一级菜单编号
    //     firstMenuId: '03',
    //     // 菜单编号
    //     menuId: '00111'
    //     // 通过 url 传递的参数
    //     // data: [{ name: 'li', sex: '2' }, { name: 'xu', sex: '1' }]
    //   })
    // },
    confirmForm() {
      this.isShow = false
    },
    detilInfo(row) {
      this.isShow = true
      this.expandSelect(row)
    },
    cancelDialog() {
      this.isShow = false
    },
    // 获取下拉数据
    getDrop() {
    },
    // 获取表格数据
    getParameterData(currentPage, pageSize) {
    },
    // 表格单选
    selectCurrent(row) {
    },
    // 分页器
    handleSizeChange(val) {
      this.pageSize = val
      this.getParameterData(this.currentPage, this.pageSize)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getParameterData(this.currentPage, this.pageSize)
    },
    // 变更记录分页器
    // handleSizeChangeRecord(val) {
    //   this.pageSize = val
    //   this.getParameterData(this.currentPageRecord, this.pageSizeRecord)
    // },
    // handleCurrentChangeRecord(val) {
    //   this.currentPageRecord = val
    //   this.getParameterData(this.currentPageRecord, this.pageSizeRecord)
    // },
    // 查询
    search() {
      this.searchForm.poolarea = this.$refs.poolareaSelect.poolarea[this.$refs.poolareaSelect.poolarea.length - 1]
      this.$refs['searchForm'].validate((valid) => {
        if (valid) {
          this.getParameterData(this.currentPage, this.pageSize)
        } else {
          return false
        }
      })
    },
    // 重置
    restSearch() {
      this.$refs.searchForm.resetFields()
      this.$refs.poolareaSelect.reset()
      this.searchForm.poolarea = this.$sessionPoolarea1
      this.getParameterData(1, 15)
      // this.search()
    },
    // 审核
    auditRow(val) {
    },
    getRowKeys(row) {
      return row.rid
    },
    // 变更记录查询
    expandSelect(row) {
    }
  }
}
</script>

<style scoped lang="scss">

</style>
